<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>16_CSS3-新增盒子属性-box-shadow</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: aqua;

                /* 一个值  没有什么效果*/
                box-shadow: 10px;

                /* 二个值   第一个值水平方向移动的距离
                           第二个值垂直方法移动的距离
                */
                box-shadow: 10px 10px;

                /* 三个值   第一个值水平方向移动的距离
                           第二个值垂直方法移动的距离
                           第三个值代表的是模糊的距离 */
                box-shadow: 10px 10px 10px;

                /* 四个值   第一个值水平方向移动的距离
                           第二个值垂直方法移动的距离
                           第三个值代表的是模糊的距离
                           第四个值代表的是阴影的尺寸
                           */
                box-shadow: 10px 10px 10px 10px;

                /* 五个值   第一个值水平方向移动的距离
                           第二个值垂直方法移动的距离
                           第三个值代表的是模糊的距离
                           第四个值代表的是阴影的尺寸
                           第五个值代表的是阴影的颜色 */
                box-shadow: 10px 10px 10px 10px red;

                /* 六个值   第一个值水平方向移动的距离
                           第二个值垂直方法移动的距离
                           第三个值代表的是模糊的距离
                           第四个值代表的是阴影的尺寸
                           第五个值代表的是阴影的颜色
                           第六个值代表的是阴影的位置 内部还是外部 */
                box-shadow: 10px 10px 10px 10px red inset;


                /* 使用场景最多的方式 */
                box-shadow: 10px 10px 10px #ccc;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>